import React, { Component, lazy, Suspense } from 'react';

// 从路由库导入 路由相关组件
import { Link, NavLink, Route, Switch, Redirect } from 'react-router-dom'
import MyTabbar from '../components/MyTabbar'
import './Index.scss'

var Home = lazy(() => import('./Index/Home'))
var Cate = lazy(() => import('./Index/Cate'))
var Allgood = lazy(() => import('./Index/Allgood'))
var Shopcart = lazy(() => import('./Index/Shopcart'))
var Mine = lazy(() => import('./Index/Mine'))
var NotFound = lazy(() => import('./NotFound'))

class Index extends Component {
    render() {
        return (
            <div className='box'>
                <Suspense fallback={<div className='loading'></div>}>
                    {/* 定义二级路由规则 , 也充当组件渲染出口(占位符) */}
                    <Switch>
                        <Route exact path="/index/home" component={Home} />
                        <Route exact path="/index/cate" component={Cate} />
                        <Route exact path="/index/allgood" component={Allgood} />
                        <Route exact path="/index/shopcart" component={Shopcart} />
                        <Route exact path="/index/mine" component={Mine} />
                        <Redirect exact from='/index' to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>

                <MyTabbar />

            </div>
        );
    }
}

export default Index;